<template>
  <div>
    <Search></Search>
    <Row class="my-wrap">
      <Col span="4" class="my-left">
      <div class="avatar-wrap">
        <Avatar size="80" :src="userInfo.headimgurl" shape="circle" icon="logo-octocat"></Avatar>
        <p class="username">{{ userInfo.user_name }}</p>
      </div>
      <Menu :theme="theme" :active-name="menuName" width="180px" @on-select="onSelct">
        <MenuGroup>
          <MenuItem v-for="(item, i) in menuList" :key="`mItem-${i}`" :name="`${item.type}`">
          {{ $t(item.name) }}
          </MenuItem>
        </MenuGroup>
      </Menu>
      </Col>
      <Col span="20" class="my-right">
      <component :is="componentType"></component>
      </Col>
    </Row>
  </div>
</template>

<script>
import { Search } from "@/components";
import { mapState } from 'vuex'
export default {
  name: 'My',
  data() {
    return {
      theme: "light",
      menuName: "MyAccount"
    }
  },
  computed: {
    ...mapState(['userInfo']),
    componentType() {
      return this.menuList.filter(v => v.type === this.menuName)[0].componentType
    },

    menuList() {
      return [
        {
          name: "我的账户",
          type: "MyAccount",
          componentType: "MyAccount",
          method: "",
        },
        {
          name: "我的订单",
          type: "MyOrder",
          componentType: "MyOrder",
          method: "",
        },
        // {
        //   name: "当前余额",
        //   type: "Balance",
        //   componentType: "Balance",
        //   method: "",
        // },
        {
          name: "收货地址管理",
          type: "AddressManager",
          componentType: "AddressManager",
          method: "AddressManager",
        },
        // {
        //   name: "我的优惠券",
        //   type: "Coupon",
        //   componentType: "Coupon",
        //   method: "",
        // },
        {
          name: "我要开店",
          type: "ApplyShop",
          componentType: "ApplyShop",
          method: "",
        }
      ].filter(v => {
        return !(v.type === 'ApplyShop' && this.userInfo.shop_id !== 0)
      })
    }
  },

  created() {
    if (this.$store.state.token) {
      this.$store.dispatch('getUserInfo')
    }
  },

  watch: {
    $route: {
      handler(v) {
        this.menuName = v.query.name || 'MyAccount'
      },
      deep: true,
      immediate: true
    }
  },

  components: {
    Search,
    MyOrder: () => import("./order/MyOrder.vue"),
    MyAccount: () => import("./MyAccount.vue"),
    AfterSale: () => import("./AfterSale.vue"),
    Balance: () => import("./Balance.vue"),
    Integral: () => import("./Integral.vue"),
    Collect: () => import("./Collect.vue"),
    Coupon: () => import("./Coupon.vue"),
    ApplyShop: () => import("./ApplyShop.vue"),
    ApplySupplier: () => import("./ApplySupplier.vue"),
    AddressManager: () => import("./AddressManager.vue"),
  },

  methods: {
    onSelct(name) {
      this.$router.push(`/my?name=${name}`)
      this.menuName = name;
    }
  }
}
</script>


<style lang="scss" scoped>
.my-wrap {
  width: 1190px;
  margin: 10px auto;
  display: flex;
}

.my-right {
  background-color: #fff;
  padding: 20px;
}

.avatar-wrap {
  background-color: #fff;
  padding: 20px;
  width: 180px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 0 10px;

  .username {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
  }
}

/deep/ .ivu-menu-item-group-title {
  display: none;
}

.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
</style>
